<template>
	<view>
		<u-navbar :placeholder="true">
			<view slot="left"></view>
			<view slot="center">
				<u-tabs :list="tabList" :current='tabIndex' lineColor="#000" @change="tabChange"></u-tabs>
			</view>
		</u-navbar>
		<!-- 圈子Tab -->
		<q-topic-more v-if="tabIndex === 0"></q-topic-more>
		<!-- 发现Tab -->
		<view v-show="tabIndex === 1">
			<view style="margin: 20rpx;">
				<u-search @click="onSearch" placeholder="查找感兴趣内容~" v-model="keyword" :showAction='false'
					:disabled="true">
				</u-search>
			</view>
			<u-tabs :list="classList" :current='classIndex' :lineColor="themesColor" @change="classChange"></u-tabs>
			<q-post-waterfall ref="postWaterfall" :list="postList" :loadStatus="loadStatus"></q-post-waterfall>
		</view>

		<!-- 附近Tab -->
		<view v-show="tabIndex === 2"></view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- tabbar -->
		<q-tabbar :active="0" :count="msgCount"></q-tabbar>
	</view>
</template>

<script>
	import {
		themesColor
	} from '@/uni.scss';
	export default {
		data() {
			return {
				themesColor,
				scrollTop: 0,
				tabIndex: 1,
				loadStatus: 'loadmore',
				page: 1,
				postList: [],
				noticeStyle: {
					width: "90%"
				},
				tabList: [{
					name: '圈子'
				}, {
					name: '发现'
				}],
				classIndex: 0,
				classList: [],
				classId:''
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			msgCount() {
				return this.$store.state.messegeNum;
			}
		},
		onLoad() {
			this.getPostList();
			this.getClassList();
		},
		onShow() {
			if (this.$store.state.userInfo.id) {
				this.getMsgNum();
			}
		},
		onReachBottom() {
			this.page++;
			this.getPostList();
		},
		onPullDownRefresh() {
			this.$refs['postWaterfall'].clear()
			this.page = 1;
			this.postList = [];
			this.getPostList();
			uni.stopPullDownRefresh();
		},
		methods: {
			// 获取类目列表
			getClassList() {
				this.$H.get('topic/classList').then(res => {
					const defaultClass = [{
						name: '推荐'
					}];

					this.classList = [...defaultClass, ...res.data];
				});
			},
			tabChange(e) {
				this.tabIndex = e.index;
			},
			classChange(e) {
				this.classIndex = e.index;
				this.page = 1;
				this.postList = [];
				this.$refs['postWaterfall'].clear()

				this.classId = e.id ? e.id : '';

				this.getPostList();
			},
			onSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			getMsgNum() {
				this.$H.post('message/num').then(res => {
					this.$store.state.messegeNum = [0, 0, 0, res.data.all_count, 0];
				});
			},
			// 获取帖子列表
			getPostList() {
				this.loadStatus = 'loading';
				this.$H
					.get('post/imagePost', {
						page: this.page,
						topic_class_id:this.classId
					})
					.then(res => {
						this.postList = res.data.data;
						if (res.data.current_page === res.data.last_page || res.data.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.join-topic-wrap {
		margin: 20rpx;

		.title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #999;
		}

		.topic-list {
			display: flex;

			.topic-item {
				width: 120rpx;
				margin-right: 30rpx;

				.cover-img {
					width: 120rpx;
					height: 120rpx;
					display: block;
					border-radius: 10rpx;
					background-color: #eee;
				}

				.name-text {
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}


	// 公告
	.notice-wrap {
		padding: 30rpx;

		.title {
			text-align: center;
			font-weight: bold;
			color: #616161;
			margin-bottom: 30rpx;
		}

		.content {
			line-height: 1.8;
			color: #616161;
			margin-bottom: 50rpx;
		}

		.time {
			color: #999;
			text-align: right;
			margin-bottom: 50rpx;
		}

		.footer {
			padding: 0 50rpx;
		}
	}
</style>
